<template>
  <div class="main">
    <el-container style="background-color: transparent">
      <el-header :class="{isHome: '/' === $route.path} " id="ooter">
        <div style="display: inline-block;" class="logo" @click="toHome">
          <span style="color: #3a86ff">Blink</span>
        </div>
          <div class="header-right">
            <!-- 未登录时显示 -->
            <template v-if="!showName">
              <el-button style="font-size: 15px;" @click="toLogin">登录</el-button>
              <el-button type="success" style="font-size: 15px; " @click="toRegister">注册</el-button>
            </template>
            <!-- 登录时显示 -->
            <template v-else>
              <ul class="header-nav">
                <li class="nav-item" @click="toManage">
                  <span style="margin-right: 6px;color: #3a86ff;"><i class="iconfont icon-Home"></i></span>
                  <span id="toManage">问卷管理</span>
                </li>
                <li class="nav-item" style="margin: auto 10px;"><el-divider direction="vertical"></el-divider></li>
                <li class="nav-item">
                  <!-- 登录成功显示用户名 -->
                  <el-dropdown trigger="click" @command="handleCommand">
                    <span class="el-dropdown-link" style="color: black;">
                      {{ userName }}<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item command="a">问卷管理</el-dropdown-item>
                      <el-dropdown-item command="b">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </li>
              </ul>
            </template>
          </div>
      </el-header>
      <el-main style="padding: 0;">
        <router-view/>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      showName: false,
      userName: '',
      showManage: false
    }
  },
  methods: {
    /*----- 页面跳转方法 -----*/
    // 跳转主页
    toHome() {
      this.$router.push({path: '/'});
    },
    // 跳转登录
    toLogin() {
      this.$router.push({path: '/login'});
    },
    toRegister() {
      this.$router.push({path: '/register'});
    },
    // 跳转问卷管理
    toManage() {
      this.$router.push({path: '/manage'});
    },
    /*----------------------*/

    /*----- 下拉菜单 -----*/
    handleCommand(command) {
      if (command === 'a') {
        this.toManage();
      } else if (command === 'b') {
        this.logout();
      }
    },
    /*------------------*/

    /*----- 检查登录状态 -----*/
    loginCheckout() {
      if (this.$store.state.isLogin === true) {
        this.showName = true;
        this.userName = this.$store.state.userName;
      } else
        this.showName = false;
    },
    /*---------------------*/

    /*----- 退出登录 -----*/
    // TODO: 退出登录逻辑
    logout() {
      this.$store.state.isLogin = false
      this.toLogin()
    },
    /*------------------*/
  },
  mounted() {
    this.loginCheckout();
  }
}
</script>

<style scoped>
@media print {
  #ooter{
    display: none;
  }
}
.main {
  position: absolute;
  width: 100%;
  height: 100%;
}
.logo {
  height: 60px;
  display: inline-block;
  line-height: 60px;
  font-size: 30px;
  font-weight: 750;
  position: absolute;
  left: 50px;
  cursor: pointer;
}
.header-right {
  float: right;
  margin-right: 50px;
  line-height: 60px;
}
.el-header {
  border-bottom: 2px solid #dee2e6;
  background-color: white;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.isHome {
  background: transparent;
}
.header-nav {
  float: right;
  height: 100%;
  line-height: 60px;
  background: transparent;
  padding: 0;
  margin: 0;

  /*display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 40px;*/
}
.nav-item {
  margin: 0;
  float: left;
  list-style: none;
  position: relative;
  cursor: pointer;
}
#toManage:hover {
  color: #3a86ff;
}
li {
  display: list-item;
  text-align: -webkit-match-parent;
}
</style>